// 导入pixi.js
import * as PIXI from "pixi.js";
// pixi的app
import {PixiApp} from '@/pixi/App'
// 主容器
import {container} from '@/pixi/container'
// assets 静态资源
import {texturesPromise} from '@/pixi/assets'
// 主容器bg
import {bgContainer} from '@/pixi/bgContainer'
import {CreateBg} from '@/pixi/CreateBg'
// 绑定鼠标 controle
import {MouseControle} from '@/pixi/MouseControle.js'
// 创建文字
import {Text} from '@/pixi/Text.js'
// 创建精灵
import {CreateSprite} from '@/pixi/CreateSprite.js'
import {DomSprite} from '@/pixi/DomSprite.js'
// 屏幕resize
import {ScreenResize} from '@/pixi/ScreenResize.js'
// 绘制虚线
import { Dash } from '@/pixi/Dash'
// 轨迹线
import { Path } from '@/pixi/Path'
// filters
import {outlineFilter, glowFilter} from '@/pixi/pixiFilters'
import {spriteContainer} from "@/pixi/spriteContainer";
// container添加各个 子容器
import {addAllContainer,clearAllContainer} from '@/pixi/addAllContainer'

import {isNumber} from '@/utils/index'

import {storeToRefs} from "pinia";
import  {usePixiStore}  from '@/store/pixi'
import $bus from '@/mitt/index'
import {toRaw} from "vue";
import $ from "jquery";

export class Pixi{
    constructor({dom,containerX=0,containerY=0,scaleX=1,scaleY=1,rotation=0}) {
        this.pixiApp = PixiApp.init()
        // console.log('index',this.pixiApp)
        // 将应用画布添加到DOM中
        this.pixiApp.app.stage.addChild(container);

        // $(dom).parent().css({
        //     transform:'translate(-10000px, -10000px)',
        // })
        console.log('this.pixiApp.app.view',this.pixiApp.app.view)
        dom.appendChild(this.pixiApp.app.view);
        // $nextTick(()=>{
        //     $(dom).parent().css({
        //         transform:'translate(0, 0)',
        //     })
        // })
        if((isNumber(scaleX) && scaleX) || (isNumber(scaleX) && scaleX==0)) {
            container.scale.x = scaleX
        }
        if((isNumber(scaleY) && scaleY) || (isNumber(scaleY) && scaleY==0)) {
            container.scale.y = scaleY
        }
        if(isNumber(containerX) && containerX){
            container.x = containerX;
        }
        if(isNumber(containerY) && containerY){
            container.y = containerY;
        }
        if((isNumber(rotation) && rotation) || (isNumber(rotation) && rotation==0)) {
            container.rotation = rotation;
        }

        //创建轮廓滤镜 outlineFilter, glowFilter
        this.outline = outlineFilter({width:2, color:0x99ff99})
        // 创建发光滤镜
        this.glow = glowFilter({
            distance: 50,
            outerStrength: 1,
            innerStrength: 0,
            color: 0xff0000,
            quality: 0.5,
        });

        this.mouseControle = null

    }

    static textures = null;

    static async create(params){
        // Assets 静态资源集
        await this.createTextures()
        return new Pixi(params)
    }
    static async createTextures(){
        if(!this.textures){
            this.textures  = await texturesPromise
        }
    }
    // 创建 背景
    createBg({bgContainerCenterX=0,bgContainerCenterY=0,bgImgUrl,bgWidth,bgHeight}){
        let store = usePixiStore()
        store.changeCurrentWidth()
        store.changeCurrentHeight()
        let {pixiMaxWidth,pixiMaxHeight,currentWidth,currentHeight } = storeToRefs(store)
        // 创建一个纹理 底图
        if(bgContainerCenterX){
            bgContainer.x = bgContainerCenterX/pixiMaxWidth.value*currentWidth.value
        }
        if(bgContainerCenterY){
            bgContainer.y = bgContainerCenterY/pixiMaxHeight.value*currentHeight.value
        }
        CreateBg.create({url:bgImgUrl,bgWidth:bgWidth,bgHeight:bgHeight})
    }

    // 创建 文字
    createText(options){
        return Text.create(options)
    }

    // 创建 图片精灵
    createSprite(options){
        let {hoverStyle=true,outStyle=false,autoRotate=false} = options
        // 创建一个精灵
        let tempSprite = CreateSprite.create(options)
        if(options.pointerdown){
            tempSprite.on('pointerdown', ()=>{
                options.pointerdown(tempSprite)
            });
        }

        if(options.pointerover){
            tempSprite.on('pointerover', ()=>{
                if(hoverStyle){
                    tempSprite.filters = [this.outline];
                }
                options.pointerover(tempSprite)
            });
        }

        if(options.pointerout){
            tempSprite.on('pointerout', ()=>{
                if(outStyle){
                    tempSprite.filters = [this.glow];
                }
                options.pointerout(tempSprite)
            });
        }


        tempSprite.Loop = ()=>{
            tempSprite.rotation += 0.01 ;
            tempSprite.stop = window.requestAnimationFrame(()=>{
                tempSprite.Loop()
            });
        }
        if(autoRotate){
            tempSprite.Loop()
        }

        return tempSprite
    }

    // 创建 虚线
    createDash(params){
        return Dash.createDash(params)
    }

    // 创建 轨迹线
    createPath(params){
        return Path.createPath(params)
    }

    // 绘制 dom精灵
    async createDomSprite(params){
        await DomSprite.create(params)
    }

    // 添加鼠标控制
    addMouseControles(params){
        this.mouseControle = MouseControle.init(params)
        // 初始化一次
        this.mouseControle.updateDom()
    }

    // 添加resize控制
    addResizeControles(){
        ScreenResize.init()
    }

    // 添加childrens
    containerAddChilds(){
        addAllContainer()
    }

    // 重绘 pixi 不生效
    resizePixi(){
        // console.log('resizePixi done',this.pixiApp)
        // this.pixiApp.app.render()
    }

    // 销毁事件
    destory(callback){

        // 因为container是一个。
        let store = usePixiStore()
        let { currentWidth,currentHeight, _pixiApp } = storeToRefs(store)

        // store.changePixiLoading(true)

        // container.x = currentWidth.value/2;
        // container.y =  currentHeight.value/2;
        //_________________________________

        // console.log(toRaw(_pixiApp.value).renderer)
        // let webgl2d = new PIXI.ContextSystem(toRaw(_pixiApp.value).renderer)
        // webgl2d.handleContextLost(event)
        console.log('toRaw(_pixiApp.value)',toRaw(_pixiApp.value))
        toRaw(_pixiApp.value)?.app.destroy(true)
        //_________________________________
        if(this.mouseControle){
            this.mouseControle.destroy()
        }
        // 停止图片精灵旋转动画
        spriteContainer.children.forEach(item=>{
            if(item.stop){
                window.cancelAnimationFrame(item.stop);
            }
        })
        // 清除订阅事件
        $bus.all.clear();
        // 清空子容器
        clearAllContainer()
        // 销毁 pixiApp
        store.changePixiApp(null)
        // 销毁提示框tip
        if($('.crood')[0]){
            $('.crood').remove()
        }

        // 停止虚线.path 的动画  放在回调函数中
        if(callback){
            callback()
        }


    }
}
